<template>
    <div class="row list-panel">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>客户信息</a></li>
                        <li><a>客户列表</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width="80px" size="small">
                        <el-row>
                            <el-form-item label="昵称">
                                <el-input v-model="queryForm.nickname" placeholder="昵称"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名">
                                <el-input v-model="queryForm.realName" placeholder="姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码">
                                <el-input v-model="queryForm.mobile" placeholder="手机号码"></el-input>
                            </el-form-item>
                            <el-form-item style="float: right;">
                                <a class="revision-btn" href="javaScript:void(0)" @click="onQuery">搜 索</a>&nbsp;&nbsp;
                            </el-form-item>
                        </el-row>
                        <el-row>
                            <el-form-item label="经销商">
                                <el-select v-model="queryForm.storeList" placeholder="" clearable>
                                    <el-option v-for="item in storeList" :key="item.id" :label="item.storeName"
                                               :value="item.id">
                                        <span style="float: left">{{ item.storeName }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="用户类型">
                                <el-select v-model="queryForm.userType" placeholder="" clearable>
                                    <el-option label="团长" value="2"></el-option>
                                    <el-option label="普通用户" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="审核状态">
                                <el-select v-model="queryForm.storeStatus" placeholder="" clearable>
                                    <el-option label="审核中" value="1"></el-option>
                                    <el-option label="审核通过" value="2"></el-option>
                                    <el-option label="审核拒绝" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                    </el-form>

                    <div class="col-sm-12" style="padding: 12px 0px 12px 0px;">
                        <div class="alert alert-info" style="margin-bottom: 0px">
                            <a class="revision-btn">批量删除</a>&nbsp;&nbsp;
                        </div>
                    </div>

                    <template v-if="data != null">
                        <el-table ref="multipleTable" :border="true" :data="data.list" tooltip-effect="dark"
                                  :header-cell-style="{'background-color': '#F5F5F6'}" max-height="600"
                                  align="center" class="list-table"
                                  style="width: 100%">
                            <el-table-column type="selection" width="55" align="center">
                            </el-table-column>
                            <template v-for="columnName in columnNames">
                                <template v-if="columnName.prop === 'promotionStatus'">
                                    <el-table-column :label="columnName.label" :prop="columnName.prop" align="center">
                                        <template slot-scope="scope">
                                            <i class="el-icon-error" style="color:#F00;"
                                               v-if="scope.row.promotionStatus === 'N'"></i>
                                            <i class="el-icon-success" style="color:#1ab394;"
                                               v-if="scope.row.promotionStatus === 'Y'"></i>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'nickname'">
                                    <el-table-column align="center" :label="columnName.label" :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <el-button type="text" style="font-size: 12px"
                                                       @click="getCustomerDetail(scope.row.id)">
                                                {{scope.row.nickname}}
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'storeName'">
                                    <el-table-column align="center" :label="columnName.label" :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <el-button type="text" style="font-size: 12px"
                                                       @click="getGroupDetail(scope.row.storeId)">
                                                {{scope.row.storeName}}
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'gender'">
                                    <el-table-column :label="columnName.label" width="100" :prop="columnName.prop"
                                                     align="center">
                                        <template slot-scope="scope">
                                            <span style="color:#1ab394;" v-if="scope.row.gender === '1'">男</span>
                                            <span style="color:#1ab394;" v-if="scope.row.gender === '0'">女</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'userType'">
                                    <el-table-column :label="columnName.label" :prop="columnName.prop" align="center">
                                        <template slot-scope="scope">
                                            <span style="" v-if="scope.row.userType === 1">普通用户</span>
                                            <span style="color:#1ab394;" v-if="scope.row.userType === 2">团长</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'status'">
                                    <el-table-column align="center"
                                                     :label="columnName.label"
                                                     :prop="columnName.prop">
                                        <template slot-scope="scope">
                                            <span style="color:#E6A23C;"
                                                  v-if="scope.row.status === 1">审核中</span>
                                            <span style="color:#1ab394;"
                                                  v-if="scope.row.status === 2">审核通过</span>
                                            <span style="color:#F00;"
                                                  v-if="scope.row.status === 3">审核拒绝</span>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else-if="columnName.prop === 'avatarUrl'">
                                    <el-table-column :label="columnName.label" width="120" :prop="columnName.prop"
                                                     align="center">
                                        <template slot-scope="scope">
                                            <el-popover trigger="hover" placement="top">
                                                <div style="text-align: center;">
                                                    <img :src="scope.row.avatarUrl" class="image"
                                                         style="width: 200px;height:200px">
                                                </div>
                                                <div slot="reference" class="name-wrapper">
                                                    <img :src="scope.row.avatarUrl" class="image"
                                                         style="width: 36px;height:36px">
                                                </div>
                                            </el-popover>
                                        </template>
                                    </el-table-column>
                                </template>
                                <template v-else>
                                    <el-table-column :label="columnName.label" :prop="columnName.prop" align="center">
                                    </el-table-column>
                                </template>
                            </template>
                            <el-table-column align="center" fixed="right" label="操作" width="220">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="getCustomerDetail(scope.row.id)" size="small">
                                        详情
                                    </el-button>
                                    <template v-if="scope.row.status === 1">
                                        <el-button type="text" @click="editStore(scope.row,1)" size="small"
                                                   style="color:#1ab394;">
                                            通过
                                        </el-button>
                                        <el-button type="text" @click="editStore(scope.row,0)" size="small"
                                                   style="color:#F00;">
                                            拒绝
                                        </el-button>
                                    </template>
                                    <el-button type="text" @click="getUserCouponDetail(scope.row.userId,scope.row.nickName)"
                                               size="small">
                                        优惠券
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                    <el-pagination style="float: right;margin-top: 10px" @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange" :current-page.sync="data.currPage"
                                   :page-size="data.pageSize"
                                   layout="total, prev, pager, next" :total="data.totalCount">
                    </el-pagination>

                </div>
                <view-customer-modal ref="viewCustomerModal" :customersId="customersId"
                                     :showAddModal="showCustomerModal"
                                     @onCancelNewModal="onCancelNewModal"></view-customer-modal>
                <view-store-modal ref="viewStoreModal" :StoreId="StoreId" :showAddModal="showStoreModal"
                                  @onSubmitNewModal="onSubmitNewModal"
                                  @onCancelNewModal="onCancelNewModal"></view-store-modal>
                <view-user-coupon-modal ref="viewUserCouponModal" :customersId="customersId"
                                        :showAddModal="showUserCouponModal"
                                        @onCancelNewModal="onCancelNewModal"></view-user-coupon-modal>
            </div>
        </div>
    </div>
</template>

<script>
    import ViewCustomerModal from './viewCustomerModal.vue';
    import ViewStoreModal from './viewStoreModal.vue';
    import ViewUserCouponModal from './viewUserCouponModal';

    export default {
        name: 'CustomerList',
        components: {
            ViewCustomerModal,
            ViewStoreModal,
            ViewUserCouponModal
        },
        data() {
            return {
                storeList: [],
                showStoreModal: false,
                showCustomerModal: false,
                showUserCouponModal: false,
                queryForm: {
                    nickName: '',
                    realName: '',
                    mobile: '',
                    storeName: '',
                    delivery: false,
                    storeStatus: '',
                },
                columnNames: [{
                    label: '头像',
                    prop: 'avatarUrl',
                    width: 120
                }, {
                    label: '昵称',
                    prop: 'nickName',
                    width: 120
                }, {
                    label: '姓名',
                    prop: 'realName',
                    width: 120
                }, {
                    label: '手机号',
                    prop: 'mobile',
                    width: 120
                }, {
                    label: '性别',
                    prop: 'gender',
                    width: 120
                }, {
                    label: '用户类型',
                    prop: 'userType',
                    width: 120
                }, {
                    label: '经销商',
                    prop: 'storeName',
                    width: 120
                }, {
                    label: '(团长)审核状态',
                    prop: 'status',
                    width: 120
                }, {
                    label: '创建日期',
                    prop: 'createTime',
                    width: 120
                }],
                multipleSelection: [],
                data: {},
                query: {
                    page: ''
                },
                customersId: '',
                StoreId: ''

            }
        },
        mounted: function () {
            this.listAllCustomers();
            this.listAllStores();
        },
        methods: {
            onSubmit() {
            },
            onQuery() {
                this.listAllCustomers(this.queryForm);
            },
            handleSizeChange(val) {
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.listAllCustomers(this.queryForm);
            },
            async listAllCustomers(queryForm) {
                let res = await this.$api.get('/wechatuser/list', queryForm);
                if (res.code === 0) {
                    this.data = res.page;
                } else {
                    this.$message.error(res.msg);
                }
            },

            async listAllStores() {
                let res = await this.$api.get('/mall/store/listAll', {});
                if (res.code === 0) {
                    this.storeList = res.storeList;
                    let firstItem = {
                        storeId: '',
                        storeName: '全部'
                    };
                    this.storeList.unshift(firstItem);
                } else {
                    this.$message.error(res.msg);
                }
            },
            onCancelNewModal() {
                this.showCustomerModal = false;
                this.showStoreModal = false;
                this.showUserCouponModal = false;
            },
            onSubmitNewModal() {
                this.showCustomerModal = false;
                this.showStoreModal = false;
            },

            getCustomerDetail(id) {
                this.customersId = new String(id);
                this.$refs.viewCustomerModal.getInfo(id);
                this.showCustomerModal = true;
            },
            getGroupDetail(storeId) {
                this.StoreId = new String(storeId);
                this.$refs.viewStoreModal.getInfo(storeId);
                this.showStoreModal = true;
            },
            async editStore(obj, flag) {
                let res = await this.$api.put('/wechatuser/update-status/' + obj.id + '/' + obj.storeId + '/' + flag, {});
                if (res.code === 0) {
                    this.$message.success('操作成功');
                    this.listAllCustomers(this.queryForm);
                } else {
                    this.$message.error(res.msg);
                }
            },
            getUserCouponDetail(id, nickname) {
                this.customersId = new String(id);
                this.$refs.viewUserCouponModal.listUserCoupon(id, nickname);
                this.showUserCouponModal = true;
            },
        }
    }
</script>

<style scoped>
    .list-panel .content-wrapper /deep/ .el-form-item__label {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #666;
        font-size: 12px;
        font-weight: normal;
    }

    .list-table {
        font-size: 12px;
    }
</style>
